<template>
  <div>
    <!-- <h1>详情</h1> -->
    <img :src="$pre + detail.img" alt="" />
    <div>名称：{{ detail.goodsname }}</div>
    <div v-html="detail.description"></div>
    <div v-if="detail.price">价格：{{ detail.price | filterPrice }}</div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon @click="$router.push('/index/shop')" icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" @click="isshow = true" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>


          <van-popup v-model="isshow"  position="bottom" :style="{ minHeight: '40%',maxHeigth:'70%' }" >
              <v-picker  :detail="detail" @hide="isshow=false"></v-picker>
          </van-popup>
  </div>
</template>

<script>
import axios from "axios";
import vPicker from "./components/vPicker.vue";
export default {
  components: {
    vPicker,
  },
  data() {
    return {
      detail: {},
      isshow: false,
    };
  },

  activated() {
    axios({
      url: "/api/getgoodsinfo",
      method: "get",
      params: {
        id: this.$route.params.id,
      },
    }).then((res) => {
      this.detail = res.data.list[0];
      this.detail.specsattr = this.detail.specsattr.split(",");
      // console.log( this.detail);
    });
  },
};
</script>

<style scoped>
img {
  width: 100vw;
  height: 50vh;
}
</style>